<template>
  <view class="orderdetial">
    <wd-card>
      <template #title>
        <view class="title">
          <view class="status-tag" :class="statuclass">{{ statutext }}</view>
          <view class="room">房间/区域：{{ order.roomOrAreaCode }}</view>
          <view class="ordernumber">单号：{{ order.orderNumber }}</view>
        </view>
      </template>
      <view class="order_content">
        <wd-tag type="danger" mark v-if="order.enmergency">紧急</wd-tag>
        <wd-tag type="primary" mark v-else>普通</wd-tag>
        <wd-tag type="primary" mark plain v-if="order.notification"
          >通知</wd-tag
        >
        {{ order.content }}
      </view>
      <view class="detialtext">发起人：{{ order.createUserName }}</view>
      <view class="detialtext">接单人：{{ order.acceptedUserName }}</view>

      <view class="detialtext"
        >发起时间：{{ formatDateTime(order.addTime) }}</view
      >
      <view class="detialtext"
        >接单时间：{{ formatDateTime(order.acceptTime) }}</view
      >
      <view class="detialtext"
        >完成时间：{{ formatDateTime(order.completeTime) }}</view
      >
      <template #footer>
        <view class="wd-button-group">
          <wd-button
            size="small"
            plain
            style="margin-right: 8px"
            plan
            @click="clickdetial(order.id)"
            >详情</wd-button
          >
          <wd-button
            size="small"
            v-if="showbtn"
            @click="handelAcceptOrder(order.id)"
            >{{ btntext }}</wd-button
          >
        </view>
      </template>
    </wd-card>
    <wd-toast />
  </view>
</template>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
    virtualHost: true
  }
}
</script>
<script setup lang="ts">
import { AcceptOrder, CompleteOrder } from '@/API/order'
import { OrderStatu, type workOrderDto } from '@/API/order/types'
import { useUserStore } from '@/store/user'
import moment from 'moment'
import { useToast } from '@/uni_modules/wot-design-uni'
import { computed, ref } from 'vue'
const formatDateTime = (datetime: any) => {
  if (!datetime) {
    return '-'
  }
  return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
}
const toast = useToast()
const clickdetial = (orderid: string) => {
  uni.navigateTo({
    url: `/pages/orderdetial/orderdetial?id=${orderid}`
  })
}
const props = defineProps<{
  order: workOrderDto
}>()
const showbtn = computed(() => {
  return (
    (props.order.orderStatu == OrderStatu.Created ||
      props.order.orderStatu == OrderStatu.Accepted ||
      props.order.orderStatu == OrderStatu.Transfered ||
      props.order.orderStatu == OrderStatu.Resumed) &&
    props.order.canAction
  )
})
const btntext = ref('接单')
const statutext = computed(() => {
  switch (props.order.orderStatu) {
    case OrderStatu.Created:
      btntext.value = '接单'
      if (props.order.acceptedAlertLevel > 0) {
        return '接单超时'
      } else {
        return '未接单'
      }

    case OrderStatu.Paused:
      return '已暂停'
    case OrderStatu.Accepted:
      btntext.value = '完成'
      if (props.order.completedAlertLevel > 0) {
        return '完成超时'
      } else {
        return '已接单'
      }

    case OrderStatu.Resumed:
      btntext.value = '完成'
      return '已恢复'
    case OrderStatu.Transfered:
      return '已转单'
    case OrderStatu.Completed:
      return '已完成'
    case OrderStatu.Canceled:
      return '已取消'
  }
})

const statuclass = computed(() => {
  switch (props.order.orderStatu) {
    case OrderStatu.Created:
      if (props.order.acceptedAlertLevel > 0) {
        return 'alert'
      } else {
        return 'unassigned'
      }

    case OrderStatu.Paused:
      return 'completed'
    case OrderStatu.Accepted:
      if (props.order.completedAlertLevel > 0) {
        return 'alert'
      } else {
        return 'assigned'
      }

    case OrderStatu.Resumed:
      return 'assigned'
    case OrderStatu.Transfered:
      return 'unassigned'
    case OrderStatu.Completed:
      return 'completed'
    case OrderStatu.Canceled:
      return 'completed'
  }
})
const emit = defineEmits<{
  (e: 'complete'): void
}>()
const handelAcceptOrder = async (orderid: string) => {
  const userStore = useUserStore()
  if (
    props.order.orderStatu == OrderStatu.Created ||
    props.order.orderStatu == OrderStatu.Transfered
  ) {
    const result = await AcceptOrder(orderid, userStore.phoneid)

    if (result.code != '200') {
      toast.error('接单失败，工单状态不正确')
    } else {
      props.order.orderStatu = result.orderStatu
    }
    emit('complete')
  } else if (
    props.order.orderStatu == OrderStatu.Accepted ||
    props.order.orderStatu == OrderStatu.Resumed
  ) {
    const result = await CompleteOrder(orderid, userStore.phoneid)
    if (result.code != '200') {
      toast.error('完成失败，工单状态不正确')
    } else {
      props.order.orderStatu = result.orderStatu
    }
    //完成后要发送事件，刷新主页面
    emit('complete')
  }
}
</script>

<style lang="scss" scoped>
.orderdetial {
  margin: 5rpx 30rpx;
  position: relative;

  .status-tag {
    position: absolute;
    right: 30rpx;
    padding: 5rpx 10rpx;
    border-radius: 30rpx 0 0 30rpx;
    /* 圆角只在左侧 */
    font-size: 30rpx;
  }

  .completed {
    background-color: #4caf50;
    color: white;
  }

  .unassigned {
    background-color: #ff9800;
    color: white;
  }

  .assigned {
    background-color: #2196f3;
    color: white;
  }

  .alert {
    background-color: #f44336;
    color: white;
  }

  .room {
    display: flex;
    font-weight: bold;
    font-size: 35rpx;
    justify-content: left;
    align-items: center;
    width: 100%;
  }

  .ordernumber {
    margin: 15rpx 0 0 0;
    font-size: 28rpx;
    color: #7c7c7c;
  }

  .order_content {
    padding: 10rpx;
    background-color: #f6f7f8;
    font-size: 35rpx;
    color: #7c7c7c;
  }

  :deep(.wd-card) {
    box-shadow: var(
      --wot-card-shadow-color,
      0px 4px 10px 1px rgba(0, 0, 0, 0.2)
    ) !important;
    background: transparent;
  }

  :deep(.wd-tag__text) {
    font-size: 30rpx;
  }

  :deep(.wd-tag) {
    margin-left: 10rpx;
  }

  :deep(.wd-button) {
    margin-left: 10rpx;
  }

  :deep(.wd-button__text) {
    font-size: 35rpx;
  }

  .detialtext {
    margin-top: 10rpx;
    font-size: 30rpx;
    color: #333333;
  }

  .vertical-line {
    width: 1px; /* 或者你想要的任何其他厚度 */
    height: 100%; /* 这会让线条填充整个容器高度 */
    background-color: black; /* 颜色可以根据需要调整 */
  }
}
</style>
